<template>
  <div class="index">
    <header>
      <div :style="{opacity:opacity}" class="bg"></div>
      <div class="header">
        <router-link class="search" tag="div" to="/Search">
          <van-icon name="search" size=".22rem" color="#ccc" style />
        </router-link>
        <van-icon class="login" name="chat-o" size=".3rem" color="#fff" />
      </div>
    </header>

    <main class="main">
      <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="下拉加载数据..."
          @load="onLoad"
        >
          <div class="cont">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image" height="405" />
              </van-swipe-item>
            </van-swipe>
            <div class="Vajra">
              <div class="col" v-for="(item,index) in Vajra" :key="index">
                <i>
                  <van-icon :name="item.name" size=".24rem" color="#E33E33" />
                </i>
                <span>{{item.title}}</span>
              </div>
            </div>
            <!-- 限时专场 -->
            <MsEntryTab></MsEntryTab>
            <!-- 为你推荐 -->
            <div class="recom"><Recommend v-for="(item) in data_list" :key="item.id" :recom="item"></Recommend></div>
          </div>
        </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import Vue from "vue";
import { get } from "utils/http";
import {
  Lazyload,
  Swipe,
  SwipeItem,
  List,
  Toast,
  CountDown,
  PullRefresh
} from "vant";
import BScroll from "better-scroll";
import MsEntryTab from "components/MsEntryTab";
import Recommend from "components/Recommend";
import axios from 'axios'

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(PullRefresh);
Vue.use(List);
Vue.use(CountDown);
export default {
  data() {
    return {
      opacity: { type: Number, default: 0 },
      loading: false,
      finished: true,
      refreshing: false,
      error: false,
      data_list: [],
      pid: null,

      images: [
        "https://img04.miyabaobei.com/d1/p6/2020/07/23/9b/62/9b62f9a71f05c16079b749417cf2046a983181771.jpg",
        "https://img01.miyabaobei.com/d1/p6/2020/07/01/fa/34/fa341e7045c85aeeb8f2d35817e4bc83129194940.jpg"
      ],
      Vajra: [
        {
          title: "品牌馆",
          name: "goods-collect"
        },
        {
          title: "TOP榜",
          name: "goods-collect"
        },
        {
          title: "直播广场",
          name: "goods-collect"
        },
        {
          title: "活动日历",
          name: "goods-collect"
        }
      ]
    };
  },
  components: {
    Recommend,
    MsEntryTab
  },
  methods: {
 
    onRefresh() {
    axios({
      url:'https://m.miabaobei.com/instant/groupon/common_list/1/154/'
    })
    .then((res)=>{
    
      // let url_='https://m.miabaobei.com/instant/groupon/common_list/1/131/',
        // console.log(url_);
      this.data_list = [
        ...res.data.data_list,
        ...this.data_list
      ]
       this.isLoading = false;

    })

      // 清空列表数据
      this.finished = false;
     
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    
    async onLoad() {
      
     
      if (this.refreshing) {
          this.data_list = [];
          this.refreshing = false;
        }
      let item_list = await get({
        url: "/instant/groupon/common_list/1/130/"
      });
 
     
      this.loading = false;
      this.data_list = [
        ...this.data_list,
        ...item_list.data_list
      ];
      
      await this.$nextTick()
      this.bscroll.refresh()
      // this.bscroll.refresh();

      if (this.data_list.length > 10) {
        this.finished = true;
      }
    },
    // async created() {

    // https://m.miabaobei.com/instant/seckill/seckillPromotionInfo/1
    // },
  },

  mounted() {
    this.bscroll = new BScroll(".main", {
      scrollY: true,
      momentum: true,
      click: true,
      probeType: 3
    });
    this.bscroll.on("scroll", y => {
      let op = parseInt(y.y * -1);
      op = op / 100 >= 1 ? (op = 1) : op / 100;
      this.opacity = op;
    });
    this.bscroll.on("pullingDown",()=>{
      console.log(1);
    })
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/border.styl';

.index {
  // flex 1
  height: 100%;
  overflow: hidden;
  width: 100%;

  
  header {
    height: 0.5rem;
    position: fixed;
    z-index: 998;

    .bg {
      width: 100%;
      height: 0.5rem;
      position: fixed;
      z-index: 900;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: #ea4241;
    }

    .header {
      height: 0.5rem;
      line-height: 0.5rem;
      // opacity
      display: flex;
      width: 100%;
      z-index: 998;
      position: fixed;
      padding: 0.08rem 0.15rem;

      .search {
        border-radius: 0.2rem;
        height: 0.32rem;
        flex: 100;
        // position absolute
        justify-content: center;
        align-items: center;
        background: #ffffff;
        text-indent: 0.05rem;
        outline: none;
        border: none;
        z-index: 999;
      }

      .login {
        margin-left: 0.1rem;
        z-index: 999;
      }

      div {
        width: 50px;
        background: #fff;
      }
    }
  }

  main {
    height: 100%;
    flex: 1;

    .cont {
      // height 100%
      >div {
        margin-bottom: 1px;
      }

      .Vajra {
        margin: 0 0.2rem 0 0.2rem;
        height: 0.8rem;
        width: 90%;
        margin-bottom: 0.2rem;
        border-radius: 0.1rem;
        transform: translateY(-15px);
        background: #fff;
        box-shadow: 0.01rem 0rem 0.1rem 0 #eee;
        display: flex;
        overflow: hidden;

        .col {
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: center;
          align-items: center;
          flex: 25;
          font-size: 0.12rem;
        }
      }
      .recom {
      display: flex;
      height: 100%;
      margin: 15px 20px;
      flex-flow: wrap;}
    }
  }

  img {
    width: 100%;
    border: none;
    vertical-align: top;
  }
}
</style>
